<template>
  <div class="wraper" style="background: #f0f2f5; padding: 24px">
    <a-card :bordered="false">
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content">
        <!-- {{ steps[current].content }} -->
        <span v-show="current === 0">1</span>
        <span v-show="current === 1">2</span>
        <span v-show="current === 2">3</span>
      </div>
    </a-card>
    <div class="toolBar" style="padding-left: 200px">
      <div class="footerBar">
        <a-button
          type="primary"
          v-if="current > 0"
          style="margin-right: 8px"
          @click="prev"
        >
          上一步
        </a-button>
        <a-button type="primary" v-if="current > 0" style="margin-right: 8px"
          >保存为模板</a-button
        >
        <a-button type="primary" @click="next"> 下一步 </a-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      current: 0,
      steps: [
        {
          title: '核对人员工资',
          content: 'First-content',
        },
        {
          title: '选择工资条显示',
          content: 'Second-content',
        },
        {
          title: '发放工资条',
          content: 'Last-content',
        },
      ],
    }
  },
  methods: {
    next () {
      this.current++
    },
    prev () {
      this.current--
    },
  },
};
</script>
<style scoped lang="scss">
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
.toolBar {
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 64px;
  line-height: 64px;
  z-index: 900;
  text-align: center;
}
.footerBar {
  box-shadow: 0 -1px 2px rgb(0 0 0 / 3%);
  background: #fff;
  border-top: 1px solid #e8e8e8;
}
</style>